<template>
  <div id="app">
    <top @setkeep="setkeep" @search="search_change"></top>
    <keep-alive :exclude="includedComponents">
      <router-view @setkeep="setkeep" :val="this.search_val"></router-view>
    </keep-alive>
    <bottom></bottom>
  </div>
</template>
<script type="text/ecmascript-6">
  import top from 'components/top'
  import bottom from 'components/bottom'
  import {w_scroll_top} from 'assets/dom/dom'

  export default {
    name: 'app',
    data() {
      return {
        includedComponents: "",
        search_val: "",
        indexTop: 0,
        allClassTop: 0,
        searchTop: 0
      }
    },
    mounted() {
      this.$nextTick(function () {
        console.log(1)
      })

    },
    methods: {
      setkeep(iskeep) {
        this.includedComponents = iskeep
      }
      , search_change(val) {
        this.search_val = val
      }
    },
    components: {
      top,
      bottom
    },
    watch: {
      '$route'(to, from) {
        if (from.path === to.path) {
          return
        }
        if (from.path === '/index' && to.path === '/detial') {
          this.indexTop = w_scroll_top()
          return
        }
        if (from.path === '/detial' && to.path === '/index') {
          setTimeout(() => {
            w_scroll_top(this.indexTop)
          }, 100)
          return
        }
        if (from.path === '/allClass' && to.path === '/detial') {
          this.allClassTop = w_scroll_top()
          return
        }
        if (from.path === '/detial' && to.path === '/allClass') {
          setTimeout(() => {
            w_scroll_top(this.allClassTop)
          }, 100)
          return
        }
        if (from.path === '/search' && to.path === '/detial') {
          this.searchTop = w_scroll_top()
          return
        }
        if (from.path === '/detial' && to.path === '/search') {
          setTimeout(() => {
            w_scroll_top(this.searchTop)
          }, 100)
          return
        }
          w_scroll_top(0)
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    overflow: hidden;
  }
</style>
